<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/base.css">
</head>
<style>
    .box {
        width: 500px;
        margin: 200px auto;
    }

    ul li {
        float: left;
        width: 25%;
        height: 20px;
        text-align: center;
        border: 1px solid #ccc;
        
    }

    .btm .item {
        width: 100%;
        height: 200px;
        display: none;
        background-color: pink;

    }
    .bg{
        background-color: pink;
    }
</style>

<body>
    <div class="box">
        <div class="nav">
            <ul class="clearfix">
                <li class="bg"><a href="#">内容1</a></li>
                <li><a href="#">内容2</a></li>
                <li><a href="#">内容3</a></li>
                <li><a href="#">内容4</a></li>
            </ul>
        </div>
        <div class="btm">
            <div class="item" style="display: block;">我是标题内容我叫内容1</div>
            <div class="item">我是标题一的内容我叫内容2</div>
            <div class="item">我是标题一的容我叫内容3</div>
            <div class="item">我是标题一的内容4</div>
        </div>
    </div>
    <script>
        // let lis = document.querySelectorAll('li');
        // let items = document.querySelectorAll('.item');
        // let indexs = 0;
        // for (let i = 0; i < lis.length; i++) {
        //     lis[i].setAttribute('it_index', i);
        //     lis[i].onclick = function () {
        //         indexs = this.getAttribute('it_index');
        //         //排他思想
        //         for (let j = 0; j < items.length; j++) {
        //             items[j].style.display = 'none';
        //             lis[j].classList.remove('bg');
        //         }
        //         this.classList.add('bg');
        //         items[indexs].style.display = 'block';
        //     }
        // }


        //---------优化写法---------          

        let lis = document.querySelectorAll('li');
        let items = document.querySelectorAll('.item');
        //indexs记录每次选中的索引
        let indexs = 0;
        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                //将上一次选中项的类名清除和修改属性
                lis[indexs].className="";
                items[indexs].style.display='none';
                //把本次点击的项的索引赋给indexs
                indexs=i;
                //给当前点击的的项添加类型和修改属性
                this.className='bg';
                items[i].style.display='block';  //items[]里面的索引值可以是indexs或者是i;
            }
        }
    </script>
</body>

</html>